<template>
    <el-drawer v-model="roleSettingDraw" title="角色配置" :with-header="false">
        <span>角色配置</span><br>
        <el-select v-model="tempRole" multiple placeholder="Select" style="width: 100%;margin-top: 20px">
            <el-option v-for="item in roleListTemp" :key="item.roleCode" :label="item.roleName" :value="item.roleCode" />
        </el-select>
        <el-button type="primary" @click="confirmRole()">确认</el-button>
    </el-drawer>
    <div class="overflow-x-auto rounded-lg border border-gray-200 shadow-md m-5" v-loading="userLoading"
        element-loading-background="rgba(256, 256, 256, 1)" element-loading-text="正在拼命加载中...">
        <div style="margin: 10px;">
            <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
                <el-form-item label="用户邮箱">
                    <el-input v-model="pageQuery.email" placeholder="用户邮箱" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getUserList">查找</el-button>
                </el-form-item>
            </el-form>
        </div>
        <table class="w-full border-collapse bg-white text-left text-sm text-gray-500">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">#</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">用户</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">密码(回车更改)</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">等级</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">地区</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">学校</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">标签</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">性别</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">简单题解</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">中等题解</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">困难题解</th>
                    <th scope="col" class="px-6 py-4 font-medium text-gray-900">噩梦题解</th>

                    <th scope="col" class="px-6 py-10 font-medium text-gray-900">操作</th>
                </tr>
            </thead>

            <tbody class="divide-y divide-gray-100 border-t border-gray-100">
                <tr class="hover:bg-gray-50" v-for="(user, index) in users">
                    <td class="px-2 py-2">#{{ index + 1 }}</td>

                    <th class="flex gap-3 px-6 py-4 font-normal text-gray-900">
                        <div class="relative h-10 w-10">
                            <img class="h-full w-full rounded-full object-cover object-center" :src="user.url" alt="" />
                            <!-- 在线提示绿点 -->
                            <!-- <span class="absolute right-0 bottom-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span> -->
                        </div>
                        <div class="text-sm">
                            <div class="font-medium text-gray-700">{{ user.nickName }}</div>
                            <div class="text-gray-400">{{ user.email }}</div>
                        </div>
                    </th>
                    <td class="px-4 py-4">
                        <el-input style="width: 100px;" v-model="user.password" type="password" placeholder="回车更改密码"
                            show-password />
                    </td>
                    <td class="px-4 py-4">{{ user.level }}</td>
                    <td class="px-4  py-4">{{ user.location }}</td>
                    <td class="px-4  py-4">{{ user.school }}</td>
                    <td class="px-4  py-4">
                        <el-tag class="ml-2" v-for="tags in JSON.parse(user.tag)" type="info"
                            style="margin-left: 5px;">{{
                                tags }}
                        </el-tag>
                    </td>
                    <td class="px-6 py-4">{{ user.gender }}</td>
                    <td class="px-6 py-4">{{ user.easyResolve }}</td>
                    <td class="px-6 py-4">{{ user.meddleResolve }}</td>
                    <td class="px-6 py-4">{{ user.hardResolve }}</td>
                    <td class="px-6 py-4">{{ user.nightmareResolve }}</td>
                    <td class="px-6 py-4">
                        <el-button :type="user.ban ? 'success' : 'danger'" @click="banUser(user.id, user.ban)">踢出</el-button>
                    </td>
                </tr>

            </tbody>
        </table>

    </div>
    <!-- 分页 -->
    <el-pagination class="pagination" background layout="prev, pager, next" :total="pageQuery.page.size"
        :page-size="pageQuery.page.size" @current-change="changePage" />
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { User,RoleCode } from '@/lib/types'
import API from '@/plugins/axiosInstance'
import { ElMessage } from 'element-plus';
import { userStore } from '@/store';
import { resolve } from 'path';
const roleSettingDraw = ref(false)
const userLoading = ref(true)
let users = ref<User[]>([

])
let tempUser = ref<User>()
let tempRole = ref([])
let roleListTemp = ref<RoleCode[]>()
API({
    url: '/role/getRoleList',
    method: 'get'
}).then((res) => {
    roleListTemp.value = res.data.data

})
const pageQuery = ref({
    page: {
        total: 0,
        size: 15,
        current: 1,
    },
    email: ''
})

const choiceRole = (user:User) => {
    roleSettingDraw.value = true
    tempUser.value = user
    tempRole.value.length = 0
    user.roleList.forEach(role => {
        tempRole.value.push(role.roleCode)
    });
    
}


const confirmRole = () => {
    console.log("tempROle",tempRole);
    tempUser.value!.roleList.length = 0
    for(let role of tempRole.value){
        let temp  = {
            "roleCode":role
        }
        tempUser.value?.roleList.push(temp)
    }

    console.log("user:",tempUser);
    API({
        url: '/role/settingUserRoles',
        method: 'post',
        data: tempUser.value
    }).then((res) => {
        showMsg(res.data.state, res.data.message)
        roleSettingDraw.value = false
        getUserList()
    })
}

const getUserList = () => {
    users.value = []
    API({
        url: '/getUserList',
        method: 'post',
        data: pageQuery.value
    }).then((res) => {
        users.value = res.data.data.records
        pageQuery.value.page.total = res.data.data.total
        userLoading.value = false
    })
}
getUserList()
// 改变页码
const changePage = (newPage: number) => {
    userLoading.value = true
    pageQuery.value.page.current = newPage
    // TODO: 分页的时候选择是搜索分页还是正常分页
    getUserList()
}
const banUser = (uid: string, ban: number) => {
    let form = new FormData()
    form.append('uid', uid)
    form.append('ban', ban === 1 ? '0' : '1')
    API({
        url: '/banUser',
        method: 'put',
        data: form
    }).then((res) => {
        showMsg(res.data.state, res.data.message)
    })
}
const showMsg = (state: number, message: string) => {
    if (state === 40001) {
        ElMessage({
            message: message,
            type: 'success'
        })
    } else {
        ElMessage.error(message)
    }
}
</script>